<template>
  <div class="good-list-box">
    <div class="nav-box">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <span class="breadcrumb-link" @click="toHome">首页</span>
        </a-breadcrumb-item>
        <span slot="separator">
            <a-icon style="color: #acacac;font-size: 12px" type="right" />
          </span>
        <a-breadcrumb-item>家用电器</a-breadcrumb-item>
        <a-breadcrumb-item v-if="$store.state.keyword">
          "{{$store.state.keyword}}"
          共搜到商品
          <span style="color: #ff0000">
            {{total}}
          </span>
          个
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="list-box">
      <div class="yixuan"  v-if="selectList.length > 0" >
        <div class="left-btn" @click="handleLeftClick">
          已选条件:
        </div>
        <div class="selects">
          <template v-for="tag in selectList">
            <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
              <a-tag class="a-tag" :key="tag" closable @close="() => handleClose(tag)">
                {{ `${tag.slice(0, 20)}...` }}
              </a-tag>
            </a-tooltip>
            <a-tag class="a-tag" v-else :key="tag" closable @close="() => handleClose(tag)">
              {{ tag }}
            </a-tag>
          </template>
        </div>
        <div class="right-btn" @click="clearSelectList">清空筛选条件</div>
      </div>
      <div class="select-box">
        <div class="pinpai">
          <div class="left-label">
            品牌:
          </div>
          <ul ref="brandList">
            <li v-for="item in brandList" :key="item.brand_id">
              <span v-if="isMultipleBrand">
                <a-checkbox v-model="item.select" @click="handleSortTypeClick(item)">
                  <span  :class="{brandSelClass: item.select}">
                     {{item.brand_name}}
                  </span>
                </a-checkbox>
              </span>
              <span v-else :class="{brandSelClass: item.select}" @click="handleSortTypeClick(item)">
                {{item.brand_name}}
              </span>
            </li>
          </ul>
          <div class="xuanxiang" ref="pin" @click="handleBrandClick">+ 多选</div>
        </div>
        <div class="fenlei" v-if="classList.length > 0 && $store.state.keyword == null">
          <div class="left-label">分类:</div>
          <ul ref="classList">
            <li v-for="items in classList" :key="items.cid">
              <span v-if="isMultipleClass">
                <a-checkbox v-model="items.select" @click="handleSortTypeClick(items)">
                  <span :class="{classSelClass: items.select}">
                     {{items.pname}}
                  </span>
                </a-checkbox>
              </span>
              <span v-else :class="{classSelClass: items.select}" @click="handleSortTypeClick(items)">
                {{items.pname}}
              </span>
            </li>
          </ul>
          <div class="xuanxiang" ref="fen" @click="handleClassClick">+ 多选</div>
        </div>
        <div class="price">
          <div class="left-label">价格:</div>
          <ul ref="priceList">
            <li v-for="(price, index) in priceList" :key="index" :class="{priceClass: index === isPriceRemoveIndex}" @click="handleSortTypeClick(price)">{{price}}</li>
          </ul>
          <div class="right-box">
            <span>￥</span>
            <input type="text" v-model="lowestPrice">
            <span>-</span>
            <input type="text" v-model="highestPrice">
            <div class="xuanxiang" @click="confirmPrice">确定</div>
          </div>
        </div>
        <a-affix>
          <div class="footer">
            <div class="left-btn" @click="handleLeftClick">
              <div ref="moren" class="moren">默认</div>
              <div class="price-box">
                <div ref="jiage" class="jiage">价格</div>
                <a-icon ref="icon" class="up-icon" :class="{upDescClass: desc, upAscClass: asc, morenIcon: isDefault}" type="caret-up" />
                <a-icon ref="icon" class="down-icon" :class="{downAscClass: asc, downDescClass: desc, morenIcon: isDefault}" type="caret-down" />
              </div>
              <div class="xiaoliang" ref="xiaoliang">销量</div>
            </div>
            <div class="right-btn"></div>
          </div>
        </a-affix>
      </div>
      <div class="products-box">
        <product-list :list="productsList" :navListId="navListId" v-if="productsList.length > 0"></product-list>
        <div v-else class="empty-box">
          <div class="center-box">
            <div class="circle"></div>
            <div>
              <img src="@/assets/images/noPro.png" alt="">
              <p>没有找到相关的搜索结果</p>
              <p>请换个条件试试</p>
            </div>
          </div>
        </div>
      </div>
      <div class="Pagination">
        <a-pagination v-model="current" :total="total"  :page-size="pageSize" show-less-items @change="onChangePage"  />
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api/tabs/api'
import ProductList from '@/components/common'
import mixin from '@/assets/js/eventTarget'
import Event from '@/assets/js/event'
export default {
  name: 'index',
  mixins: [mixin],
  props: ['navListId'],
  data () {
    return {
      brandList: [],
      classList: [],
      priceList: ['￥0-449', '￥500-1000', '￥1000-1500', '￥1500以上'],
      productsList: [],
      isPriceRemoveIndex: -1,
      isMultipleBrand: false, // 品牌是否为多选
      isMultipleClass: false, // 分类是否为多选
      brandListSel: [], // 品牌已选择的数组
      classListSel: [], // 分类已选择的数组
      priceListSel: [], // 价格已选择的数组
      selectList: [], // 总的已选择的数组
      current: 1,
      total: null,
      pageSize: 20,
      lowestPrice: null, // 最低价格
      highestPrice: null, // 最高价格
      isDefault: true,
      asc: false, // 升序
      desc: false, // 降序
      formData: {
        brandId: null,
        classId: null,
        amount: null,
        sortType: null,
        sort: null
      }
    }
  },
  mounted () {
    Event.$on('getListKey5', () => {
      this.getMenuList()
    })
    this.getMenuList()
  },
  beforeDestroy () {
    Event.$off('getListKey5', () => {
      this.getMenuList()
    })
  },
  components: {
    ProductList
  },
  methods: {
    // onChange (e) {
    //   console.log(this.brandList)
    //   console.log(`checked = ${e.target.checked}`)
    // },
    onChangePage (current) {
      this.current = current
      this.getMenuList()
    },
    getMenuList (item) {
      const params = {
        module: 'app_pc',
        action: 'index',
        m: 'search',
        access_id: localStorage.getItem('token'),
        cid: this.navListId,
        keyword: this.$store.state.keyword,
        class_id: this.formData.classId,
        brand_id: this.formData.brandId,
        amount: this.formData.amount,
        sort_type: this.formData.sortType,
        sort: this.formData.sort,
        page: this.current,
        page_mch: 1,
        language: null
      }
      api.getMenuList(params).then(res => {
        if (res.data.code === 200) {
          this.brandList = res.data.data.brand_list
          this.classList = res.data.data.class_list
          this.productsList = res.data.data.list
          this.total = res.data.data.total
          if (typeof item === 'object') {
            if (item.brand_id) {
              if (this.isMultipleBrand) {
                this.brandList.forEach(brandItem => { //
                  this.brandListSel.forEach(brandSel => {
                    if (brandItem.brand_name === brandSel) {
                      brandItem.select = true
                    }
                  })
                })
              }
              if (this.classListSel.length > 0) { // 点击品牌某一条后恢复分类的选中状态
                this.classList.forEach(classItem => {
                  this.classListSel.forEach(classSel => {
                    if (classItem.pname === classSel) {
                      classItem.select = true
                    }
                  })
                })
              }
              this.brandList.forEach(items => { // 点击品牌某一条后设置其选中状态
                if (item.brand_id === items.brand_id) {
                  items.select = item.select
                }
              })
            } else {
              this.classList.forEach(classItem => {
                this.classListSel.forEach(classSel => {
                  if (classItem.pname === classSel) {
                    classItem.select = true
                  }
                })
              })
              if (this.brandListSel.length > 0) { // 点击分类某一条后要恢复品牌的选中状态
                this.brandList.forEach(brand => {
                  this.brandListSel.forEach(brandSel => {
                    if (brand.brand_name === brandSel) {
                      brand.select = true
                    }
                  })
                })
              }
              this.classList.forEach(cls => { // 点击分类某一条后设置其选中状态
                if (item.cid === cls.cid) {
                  cls.select = item.select
                }
              })
            }
          } else {
            if (this.brandListSel.length > 0) { // 点击价格某一条后要恢复品牌的选中状态
              this.brandList.forEach(brand => {
                this.brandListSel.forEach(brandSel => {
                  if (brand.brand_name === brandSel) {
                    brand.select = true
                  }
                })
              })
            }
            if (this.classListSel.length > 0) { // 点击价格某一条后要恢复分类的选中状态
              this.classList.forEach(classItem => {
                this.classListSel.forEach(classSel => {
                  if (classItem.pname === classSel) {
                    classItem.select = true
                  }
                })
              })
            }
          }
        }
      }).catch(err => {
        console.error(err)
      })
    },
    handleLeftClick () {
      const ev = window.event
      const target = ev.target || ev.srcElement
      const targetClassName = target.className
      if (targetClassName === 'moren') {
        this.formData.sort = null
        this.formData.sortType = null
        this.$refs.xiaoliang.style.color = 'unset'
        this.$refs.xiaoliang.style.fontWeight = 'unset'
        this.$refs.jiage.style.color = 'unset'
        this.$refs.jiage.style.fontWeight = 'unset'
        this.isDefault = true
        target.style.color = '#000000'
        target.style.fontWeight = 'bold'
        this.getMenuList()
      } else if (targetClassName === 'xiaoliang') {
        this.formData.sort = null
        this.formData.sortType = 'volume'
        this.isDefault = true
        this.$refs.jiage.style.color = 'unset'
        this.$refs.jiage.style.fontWeight = 'unset'
        this.$refs.moren.style.color = 'unset'
        this.$refs.moren.style.fontWeight = 'unset'
        target.style.color = '#000000'
        target.style.fontWeight = 'bold'
        this.getMenuList()
      } else {
        this.formData.sortType = 'price'
        this.isDefault = false
        this.$refs.jiage.style.color = '#000000'
        this.$refs.jiage.style.fontWeight = 'bold'
        this.$refs.moren.style.color = 'unset'
        this.$refs.moren.style.fontWeight = 'unset'
        this.$refs.xiaoliang.style.color = 'unset'
        this.$refs.xiaoliang.style.fontWeight = 'unset'
        if (!this.asc && !this.desc) {
          this.asc = !this.asc
          this.formData.sort = 'asc'
          this.getMenuList()
        } else if (this.desc) {
          this.formData.sort = 'asc'
          this.desc = !this.desc
          this.asc = !this.asc
          this.getMenuList()
        } else if (this.asc) {
          this.formData.sort = 'desc'
          this.desc = !this.desc
          this.asc = !this.asc
          this.getMenuList()
        }
      }
    },
    handleSortTypeClick (item) {
      if (this.selectList.length > 0) { // 判断总选择数组是否已存在选项，若已经存在，则先清空，不然会重复
        this.selectList = []
      }
      if (typeof item === 'object') {
        if (item.brand_name) { // 判断当前点击的是品牌列
          if (this.isMultipleBrand) { // 判断当前是否为多选状态
            this.brandList.forEach(brandItem => { // 把最新的处于已选中状态的brand变为选中状态（目的是为了让其高亮显示）
              this.brandListSel.forEach(brandSel => {
                if (brandItem.brand_name === brandSel) {
                  brandItem.select = true
                }
              })
            })
            if (item.select) { // 判断当前点击的项是否处于已选中状态，如果已选中，则要把其状态改为未选中（取消选中）
              item.select = false
              const noSelIndex = this.brandListSel.indexOf(item.brand_name)
              this.brandListSel.splice(noSelIndex, 1)
              console.log(this.brandListSel)
            } else { // 把未选中的改为选中状态
              console.log(this.brandListSel)
              let SelIndex
              this.brandList.forEach(brand => { // 找出当前点击的 brand 的索引
                if (item.brand_name === brand.brand_name) {
                  SelIndex = this.brandList.indexOf(brand)
                  console.log('当前点击', brand.brand_name, SelIndex)
                }
              })
              if (this.brandListSel.length > 0) { // 判断已选数组中是否已经有已选项，如果有已选的，才需要进行排序
                this.brandList.forEach(brand => {
                  this.brandListSel.forEach(brandSel => {
                    if (brand.brand_name === brandSel) {
                      console.log('循环出来的匹配项', brand.brand_name, brandSel)
                      console.log('选择', brandSel, this.brandListSel.indexOf(brandSel))
                      console.log('列表', brand.brand_name, this.brandList.indexOf(brand))
                      const brandSelIndex = this.brandListSel.indexOf(brandSel)
                      const brandIndex = this.brandList.indexOf(brand)
                      console.log('ok')
                      if (this.brandListSel.indexOf(item.brand_name) === -1) { // 判断已选的brand数组中是否已经有新选中的brand，没有的才要把新选中的brand插进该数组中去
                        if (SelIndex < brandIndex) { // 判断当前选中的brand的索引在数据源数组中的位置，如果新选中项的索引小于已选项的索引，则把新选中的brand插在已选brand的前面
                          this.brandListSel.splice(brandSelIndex, 0, item.brand_name)
                        } else { // 如果新选中项的索引大于已选项的索引，则把新选中的brand插在已选brand的后面，后多少由 SelIndex - unSelLength 决定
                          const Arr = []
                          const arrSel = this.brandListSel
                          for (let i = 0; i < SelIndex; i++) {
                            if (!this.brandList[i].select) {
                              Arr.push(this.brandList[i])
                            }
                          }
                          const unSelLength = Arr.length
                          arrSel.splice(SelIndex - unSelLength, 0, item.brand_name)
                        }
                      }
                    }
                  })
                })
              } else { // 已选数组中没有已选项，所以不需要排序，直接push
                this.brandListSel.push(item.brand_name)
              }
              item.select = true
            }
            const selArr = []
            this.brandList.forEach(sel => { // 查出已选中的 brand_id, 供发送请求获取商品数据时作为请求参数 ( params ) 使用
              if (sel.select) {
                selArr.push(sel.brand_id)
              }
            })
            this.formData.brandId = selArr.join(',')
            // console.log(this.formData.brandId)
          } else {
            item.select = true
            this.brandList.forEach(items => { // 单选状态下，把非当前点击的brand 的选中状态变为未选中
              if (item.brand_id !== items.brand_id) {
                items.select = false
              }
            })
            if (this.brandListSel.length > 0) { // 单选状态下，如果已选数组中已经有选中的brand ，则先把其清空
              this.brandListSel = []
            }
            this.formData.brandId = item.brand_id
            this.brandListSel.push(item.brand_name)
          }
        } else { // 当前点击的是分类列表
          if (this.isMultipleClass) { // 判断当前状态是否为多选
            this.classList.forEach(classItem => {
              this.classListSel.forEach(classSel => {
                if (classItem.pname === classSel) {
                  classItem.select = true
                }
              })
            })
            if (item.select) {
              const noClsSelIndex = this.classListSel.indexOf(item.pname)
              this.classListSel.splice(noClsSelIndex, 1)
              item.select = false
            } else {
              item.select = true
              let SelIndex
              this.classList.forEach(clsItem => { // 找出当前点击的 class 的索引
                if (item.pname === clsItem.pname) {
                  SelIndex = this.classList.indexOf(clsItem)
                }
              })
              if (this.classListSel.length > 0) { // 判断已选数组中是否已经有已选项，如果有已选的，才需要进行排序
                this.classList.forEach(cls => {
                  this.classListSel.forEach(classSel => {
                    if (cls.pname === classSel) {
                      // console.log('列表', brand.brand_name, this.brandList.indexOf(brand))
                      // console.log('选择', brandSel, this.brandListSel.indexOf(brandSel))
                      const classIndex = this.classList.indexOf(cls)
                      const classSelIndex = this.classListSel.indexOf(classSel)
                      if (this.classListSel.indexOf(item.pname) === -1) { // 判断已选的class数组中是否已经有新选中的class，没有的才要把新选中的class插进该数组中去
                        if (SelIndex < classIndex) { // 判断当前选中的brand的索引在数据源数组中的位置，如果新选中项的索引小于已选项的索引，则把新选中的class插在已选 class 的前面
                          this.classListSel.splice(classSelIndex, 0, item.pname)
                        } else { // 如果新选中项的索引大于已选项的索引，则把新选中的brand插在已选brand的后面，后多少由 SelIndex - unSelLength 决定
                          const Arr = []
                          for (let i = 0; i < SelIndex; i++) {
                            if (!this.classList[i].select) {
                              Arr.push(this.classList[i])
                            }
                          }
                          const unSelLength = Arr.length
                          this.classListSel.splice(SelIndex - unSelLength, 0, item.pname)
                        }
                      }
                    }
                  })
                })
              } else { // 已选数组中没有已选项，所以不需要排序，直接push
                this.classListSel.push(item.pname)
              }
            }
            const selArr = []
            this.classList.forEach(sel => { // 查出已选中的 class_id, 供发送请求获取商品数据时作为请求参数 ( params ) 使用
              if (sel.select) {
                selArr.push(sel.cid)
              }
            })
            this.formData.classId = selArr.join(',')
            console.log(this.formData.classId)
          } else { // 分类列表单选状态
            item.select = true
            this.classList.forEach(items => {
              if (item.cid !== items.cid) {
                items.select = false
              }
            })
            if (this.classListSel.length > 0) {
              this.classListSel = []
            }
            this.formData.classId = item.cid
            this.classListSel.push(item.pname)
          }
        }
      } else {
        this.getTarget()
        if (this.priceListSel.length > 0) {
          this.priceListSel = []
        }
        const amountArr = item.split('￥')
        const amount = amountArr[1]
        let amountStr
        if (amount.includes('以上')) {
          amountStr = amount.split('以上')[0]
          this.formData.amount = amountStr + '-'
        } else {
          this.formData.amount = amount
        }

        this.priceListSel.push(item)
      }
      this.selectList.push(this.brandListSel)
      this.selectList.push(this.classListSel)
      this.selectList.push(this.priceListSel)
      this.selectList = Array.prototype.concat.apply([], this.selectList) // 数组降维
      this.getMenuList(item)
    },
    handleClose (removedTag) {
      console.log(removedTag)
      // 找出总选择数组中除了被关闭的项，返回新的数组
      const tags = this.selectList.filter(tag => tag !== removedTag)
      this.selectList = tags
      // 在被删除的项各自对应的数组中让其颜色恢复 unset
      this.changeColor(removedTag)
      // 删除某一项后在该项所在的数组中同步删除该项
      const indexBrand = this.brandListSel.indexOf(removedTag)
      const indexClass = this.classListSel.indexOf(removedTag)
      const indexPrice = this.priceListSel.indexOf(removedTag)
      if (indexBrand !== -1) {
        this.brandListSel.splice(indexBrand, 1)
      }
      if (indexClass !== -1) {
        this.classListSel.splice(indexClass, 1)
      }
      if (indexPrice !== -1) {
        this.priceListSel.splice(indexPrice, 1)
        const indexInputPrice = this.priceList.indexOf(removedTag)
        if (indexInputPrice === -1) {
          this.formData.amount = null
          this.getMenuList()
        }
      }
      // console.log(this.brandListSel)
      // console.log(this.classListSel)
      // console.log(this.priceListSel)
    },
    confirmPrice () { // 自定义价格区间
      const priceListChildNodes = this.$refs.priceList.childNodes
      priceListChildNodes.forEach(child => { // 取消已选价格高亮显示
        child.style.color = 'unset'
      })
      let customizePrice
      if (this.lowestPrice !== null && this.highestPrice !== null) {
        customizePrice = '￥' + this.lowestPrice + '-' + this.highestPrice
        this.formData.amount = this.lowestPrice + '-' + this.highestPrice
      }
      if (this.lowestPrice === null && this.highestPrice !== null) {
        customizePrice = '￥' + '0' + '-' + this.highestPrice
        this.formData.amount = '0' + '-' + this.highestPrice
      }
      if (this.lowestPrice !== null && this.highestPrice == null) {
        customizePrice = '￥' + this.lowestPrice + ' 以上'
        this.formData.amount = this.lowestPrice + '-'
      }
      if (this.priceListSel.length > 0) {
        this.priceListSel = []
      }
      if (this.selectList.length > 0) {
        this.selectList = []
      }
      this.priceListSel.push(customizePrice)
      this.selectList.push(this.brandListSel)
      this.selectList.push(this.classListSel)
      this.selectList.push(this.priceListSel)
      this.selectList = Array.prototype.concat.apply([], this.selectList) // 数组降维
      this.lowestPrice = null
      this.highestPrice = null
      this.getMenuList()
    },
    changeColor (removedTag) {
      // 在被删除的项各自对应的数组中让其颜色恢复 unset
      // console.log(removedTag)
      const brandLength = this.brandList.length
      const classLength = this.classList.length
      const priceLength = this.priceList.length
      for (let i = 0; i < brandLength; i++) {
        const brand = this.brandList[i]
        if (brand.brand_name === removedTag) {
          if (this.isMultipleBrand) {
            const brandIdArr = this.formData.brandId.split(',')
            const removeIndex = brandIdArr.indexOf(brand.brand_id)
            brandIdArr.splice(removeIndex, 1)
            this.formData.brandId = brandIdArr.join(',')
          } else {
            this.formData.brandId = null
          }
          brand.select = false
          this.getMenuList()
        }
      }
      for (let i = 0; i < classLength; i++) {
        const classItem = this.classList[i]
        if (classItem.pname === removedTag) {
          if (this.isMultipleClass) {
            const classIdArr = this.formData.classId.split(',')
            const removeIndex = classIdArr.indexOf(classItem.brand_id)
            classIdArr.splice(removeIndex, 1)
            this.formData.classId = classIdArr.join(',')
          } else {
            this.formData.classId = null
          }
          classItem.select = false
          this.getMenuList()
        }
      }
      for (let i = 0; i < priceLength; i++) {
        const price = this.priceList[i]
        if (price === removedTag) {
          this.formData.amount = null
          this.isPriceRemoveIndex = i
          // console.log(this.isPriceRemoveIndex)
          this.getMenuList()
        }
      }
    },
    clearSelectList () {
      this.brandListSel = []
      this.classListSel = []
      this.priceListSel = []
      this.selectList = []
      this.formData.brandId = null
      this.formData.classId = null
      this.formData.amount = null
      this.brandList.forEach(item => {
        item.select = false
      })
      this.classList.forEach(item => {
        item.select = false
      })
      const priceChild = this.$refs.priceList.childNodes
      priceChild.forEach(item => {
        item.style.color = 'unset'
      })
      this.getMenuList()
    },
    handleBrandClick () { // 控制品牌是否多选
      this.isMultipleBrand = !this.isMultipleBrand
      if (this.isMultipleBrand) {
        this.$refs.pin.innerText = '单选'
        this.$refs.pin.style.color = '#1890ff'
        this.$refs.pin.style.borderColor = '#1890ff'
      } else {
        this.$refs.pin.innerText = '+ 多选'
        this.$refs.pin.style.color = 'unset'
        this.$refs.pin.style.borderColor = 'unset'
      }
    },
    handleClassClick () { // 控制分类是否多选
      this.isMultipleClass = !this.isMultipleClass
      if (this.isMultipleClass) {
        this.$refs.fen.innerText = '单选'
        this.$refs.fen.style.color = '#1890ff'
        this.$refs.fen.style.borderColor = '#1890ff'
      } else {
        this.$refs.fen.innerText = '+ 多选'
        this.$refs.fen.style.color = 'unset'
        this.$refs.fen.style.borderColor = 'unset'
      }
    },
    toHome () {
      location.reload()
    }
  }
}
</script>

<style scoped lang="scss">
.good-list-box {
  width: 100%;
  height: 100%;
  padding-left: 19px;
  /*background-color: #ff90a2;*/
  .nav-box {
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    /*background-color: #62ffe1;*/
    .breadcrumb-link {
      color: #303133!important;
      cursor: pointer;
      &:hover {
        color: #d4282d!important;
      }
    }
  }
  .list-box {
    width: 100%;
    /*height: 500px;*/
    /*background-color: #ffba9a;*/
    .yixuan {
      width: 100%;
      /*height: 80px;*/
      overflow: hidden;
      display: flex;
      align-items: center;
      margin: 0 auto;
      padding: 10px 20px 5px 20px;
      background-color: #e6e6e6;
      box-sizing: border-box;
      position: relative;
      .left-btn {
        width: 80px;
        height: 32px;
        line-height: 32px;
        color: #020202;
        font-weight: bold;
        float: left;
      }
      .selects {
        width: 85%;
        min-height: 32px;
        float: left;
        /*background-color: #d4ff58;*/
        .a-tag {
          height: 100%;
          float: left;
          margin-right: 5px;
          margin-bottom: 5px;
          line-height: 32px;
          transition: all 2s ease;
        }
      }
      .right-btn {
        position: absolute;
        right: 20px;
        color: #999999;
        cursor: pointer;
      }
    }
    .select-box {
      width: 100%;
      /*height: 80px;*/
      overflow: hidden;
      /*background-color: #c7ff59;*/
      .pinpai {
        width: 100%;
        overflow: hidden;
        border-bottom: 1px solid #e5e5e5;
        border-top: 1px solid #e5e5e5;
        /*height: 80px;*/
        padding: 12px 20px 2px 20px;
        .left-label {
          width: 90px;
          height: 100%;
          font-size: 14px;
          color: #020202;
          font-weight: bold;
          padding-top: 3px;
          /*background-color: #ff9d63;*/
          float: left;
        }
        ul {
          width: calc(100% - 200px);
          float: left;
          /*background-color: #34e1ff;*/
          li {
            display: inline-block;
            width: 16.6%;
            height: 28px;
            color: #020202;
            font-size: 14px;
            line-height: 28px;
            padding-right: 10px;
            margin-bottom: 10px;
            box-sizing: border-box;
            /*background-color: #ffc7e7;*/
            span {
              cursor: pointer;
            }
            span:hover {
              color: #1890ff!important;
            }
            .brandSelClass {
              color: #1890ff!important;
            }
          }
        }
        .xuanxiang {
          width: 55px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          float: right;
          border: 1px solid rgba(211, 211, 211, 0.9);
          cursor: pointer;
          &:hover {
            color: #1890ff!important;
            border: 1px solid #1890ff!important;
          }
        }
      }
      .fenlei {
        width: 100%;
        /*height: 80px;*/
        padding: 12px 20px 2px 20px;
        overflow: hidden;
        border-bottom: 1px solid #e5e5e5;
        .left-label {
          width: 90px;
          height: 100%;
          font-size: 14px;
          color: #020202;
          font-weight: bold;
          /*background-color: #ff9d63;*/
          float: left;
        }
        ul {
          width: calc(100% - 200px);
          float: left;
          /*background-color: #ffd92f;*/
          li {
            display: inline-block;
            width: 16.6%;
            height: 28px;
            color: #020202;
            font-size: 14px;
            line-height: 28px;
            padding-right: 10px;
            margin-bottom: 10px;
            box-sizing: border-box;
            span {
              cursor: pointer;
            }
            span:hover {
              color: #1890ff!important;
            }
            /*background-color: #ffc7e7;*/
          }
          .classSelClass {
            color: #1890ff!important;
          }
        }
        .xuanxiang {
          width: 55px;
          height: 30px;
          float: right;
          line-height: 30px;
          text-align: center;
          border: 1px solid rgba(211, 211, 211, 0.9);
          cursor: pointer;
          &:hover {
            color: #1890ff!important;
            border: 1px solid #1890ff!important;
          }
        }
      }
      .price {
        width: 100%;
        /*height: 80px;*/
        padding: 12px 20px;
        overflow: hidden;
        border-bottom: 1px solid #e5e5e5;
        .left-label {
          width: 90px;
          height: 100%;
          font-size: 14px;
          color: #020202;
          font-weight: bold;
          /*background-color: #ff9d63;*/
          float: left;
        }
        ul {
          width: calc(100% - 350px);
          float: left;
          /*background-color: #ffd92f;*/
          li {
            display: inline-block;
            width: 16.6%;
            height: 28px;
            color: #020202;
            font-size: 14px;
            line-height: 28px;
            padding-right: 10px;
            /*margin-bottom: 10px;*/
            box-sizing: border-box;
            cursor: pointer;
            &:hover {
              color: #1890ff!important;
            }
            /*background-color: #ffc7e7;*/
          }
          .priceClass {
            color: unset!important;
          }
        }
        .right-box {
          width: 260px;
          height: 30px;
          line-height: 30px;
          /*background-color: #ff977c;*/
          float: right;
          span {
            margin: 0 5px;
            display: inline-block;
            font-size: 16px;
            color: #000;
            /*font-weight: bold;*/
          }
          input {
            width: 80px;
            height: 100%;
            padding: 1px 10px;
            border: 1px solid #DCDFE6;
            display: inline-block;
            &:focus {
              outline: 1px solid #d4282d;
              border: none;
            }
          }
          .xuanxiang {
            display: inline-block;
            width: 55px;
            height: 30px;
            float: right;
            color: #e3e3e3;
            line-height: 30px;
            text-align: center;
            border: 1px solid #DCDFE6;
            background-color: #1890ff;
            cursor: pointer;
            &:hover {
              color: #fff;
              background-color: rgba(24, 144, 255, 0.7);
            }
          }
        }
      }
      .footer {
        width: 100%;
        /*height: 80px;*/
        overflow: hidden;
        display: flex;
        align-items: center;
        margin: 0 auto;
        padding: 15px 20px;
        background-color: #e6e6e6;
        box-sizing: border-box;
        .left-btn {
          width: 250px;
          /*background-color: #ff7a26;*/
          .moren {
            float: left;
            color: #020202;
            font-weight: bold;
            margin-right: 35px;
            cursor: pointer;
          }
          .price-box {
            float: left;
            width: 48px;
            overflow: hidden;
            cursor: pointer;
            /*background-color: #fff740;*/
            margin-right: 35px;
            position: relative;
            .jiage {
              float: left;
            }
            .up-icon {
              position: absolute;
              top: -1px;
              color: #9c9c9c;
            }
            .upDescClass {
              position: absolute;
              top: -1px;
              color: #9c9c9c;
            }
            .upAscClass {
              position: absolute;
              top: -1px;
              color: #191919;
            }
            .down-icon {
              position: absolute;
              bottom: -0.5px;
              color: #9c9c9c;
            }
            .downAscClass {
              position: absolute;
              bottom: -0.5px;
              color: #9c9c9c;
            }
            .downDescClass {
              position: absolute;
              bottom: -0.5px;
              color: #191919;
            }
            .morenIcon {
              color: #9c9c9c;
            }
          }
          .xiaoliang {
            float: left;
            cursor: pointer;
          }
        }
      }
    }
    .products-box {
      width: 100%;
      .empty-box {
        width: 100%;
        height: 500px;
        padding-right: 10px;
        /*background-color: #ffbff7;*/
        .center-box {
          text-align: center;
          width: 176px;
          height: 100%;
          margin: 0 auto;
          display: flex;
          align-items: center;
          position: relative;
          .circle {
            position: absolute;
            top: 285px;
            width: 100%;
            /*height: 5px;*/
            padding: 12px 0;
            border-radius: 200%;
            background-color: rgba(211, 211, 211, 0.48);
          }
          /*background-color: #ffb164;*/
          img {
            margin-bottom: 20px;
          }
          p {
            max-width: 100%;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #888888;
            line-height: 16px;
            margin-bottom: 8px;
            overflow: visible;
          }
        }
      }
    }
    .Pagination {
      width: 100%;
      /*padding-right: 10px;*/
      text-align: center;
      margin: 15px auto;
    }
  }
}
</style>
